<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

  <title>man</title>
</head>
<body>
<div id="app">
  <a href="/index.html">上一级</a>
  <ul v-for="dir in dirs">
    <a @click="enterDir(dir)">{{dir}}</a>
  </ul>
  <!-- 模态框 -->
  <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <div style="width: 100%" id="infobox">
            <ul v-for="line in execInfo" class="info"><p v-html="line">{{line}}</p></ul>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div>

</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      level: 1,
      dirs: [],
      currentPath: window.location.pathname,
      execInfo: ''
    },
    methods: {
      getLink(dir) {
        let strs = dir.split(' ');
        return strs[strs.length-1];
      },
      enterDir(dir) {
        if(this.level==1) {
          let link = '/api' + this.getLink(dir).substring(10);
          axios.get(link).then(res => {
            this.dirs = res.data;
            this.level += 1;
          });
        } else {
          let strs = dir.split(' ');
          let url = '';
          for(let str of strs) {
            if(str.startsWith('/usr/share')) {
              url = str.substring(10);
              break;
            }
          }
          url = '/api' + url.split('.')[0];
          console.log(url);
          axios.get(url).then(res=>{
            this.execInfo = res.data;
          });
          $("#myModal").modal();
        }
      },
      chooseCmd(str) {
        console.log(str);
      }
    },
    created: function () {
      axios.get('/api/man').then(res => {
        this.dirs = res.data;
      });
    }

  })
</script>

<style>
  div{
    font-size: 13pt;
  }
</style>
</html>